<div v-for="(item, index) in 10" class="stats-item">
  <div v-if="index==0" class="text-color-secondary text-align-center margin-bottom-5 match-item-date">League Round26</div>
  <div class="align-center padding-10 match-item-box">
    <time class="flex-2 flex-column align-center text-color-regular white-space-nowrap match-item-time">
      <span>20 Sep</span>
      <span>19:35</span>
    </time>
    <div class="flex-3 align-center flex-gap-5 match-item-team">
      <a class="flex-1 width-0 text-ellipsis-2" href="matchDetail.html" title="比赛详情">Manchester United Manchester ManchesterManchesterManchester</a>
      <a href="matchDetail.html" title="比赛详情"><img class="match-team-logo" src="./images/ball_park.png" alt="" srcset="" /></a>
    </div>
    <div class="flex-1 flex-column align-center margin-left-5 margin-right-5 text-color-secondary match-item-res">
      <span class="font-size-normal font-weight-bold match-item-score" :class="{'text-red': index==0 || index>3,'text-blue': index==1, 'text-green': index==2 }">{{index==3 ? 'VS' : '1-0'}}</span>
      <span v-if="index!=3" class="font-size-min line-height-1 match-item-tatus">(0-0)</span>
    </div>
    <div class="flex-3 align-center flex-gap-5 match-item-team">
      <a href="matchDetail.html" title="比赛详情"><img class="match-team-logo" src="./images/logo.ico" alt="" srcset="" /></a>
      <a class="flex-1 width-0 text-ellipsis-2" href="matchDetail.html" title="比赛详情">Chelsea</a>
    </div>
    <div class="flex-1 flex-column align-center" :class="{'text-blue': index==0, 'text-green': index==1, 'text-red': index==2}">
      <span>{{index<=2 ? '-1.0' : '-'}}</span>
      <span>{{index==0 ? 'D' : (index==1 ? 'L' : (index==2 ? 'W' : '-'))}}</span>
    </div>
    <div class="flex-1 flex-column align-center text-color-regular" :class="{'text-green': index==0, 'text-red': index==1, 'text-blue': index==2}">
      <span>{{index<=2 ? '3.0' : '-'}}</span>
      <span>{{index==0 ? 'U' : (index==1 ? 'O' : (index==2 ? 'D' : '-'))}}</span>
    </div>
    <div class="flex-1 flex-column align-center">
      <span>{{index<=2 ? '13' : '-'}}</span>
      <span class="text-color-secondary">{{index<=2 ? '5-8' : '-'}}</span>
    </div>
  </div>
</div>
